<!-- views/reconciliation/components/SmartMatchAssistant.vue -->
<template>
  <div class="smart-match-assistant">
    <div class="assistant-header">
      <h3>
        <el-icon class="header-icon"><MagicStick /></el-icon>
        智能匹配助手
      </h3>
      <el-button 
        type="danger" 
        :icon="Close" 
        circle 
        size="small" 
        @click="$emit('close')"
      />
    </div>
    
    <div class="assistant-content">
      <div class="stats-overview">
        <div class="stat-item">
          <div class="stat-value">{{ transactionsCount }}</div>
          <div class="stat-label">待匹配流水</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ ordersCount }}</div>
          <div class="stat-label">待匹配订单</div>
        </div>
      </div>
      
      <div class="suggestions-section">
        <h4>智能建议</h4>
        <div class="suggestions-list">
          <div 
            v-for="suggestion in matchSuggestions" 
            :key="suggestion.id"
            class="suggestion-card"
          >
            <div class="suggestion-header">
              <el-icon class="suggestion-icon"><Lightning /></el-icon>
              <span class="suggestion-title">{{ suggestion.title }}</span>
              <el-tag 
                size="small" 
                :type="getConfidenceType(suggestion.confidence)"
              >
                {{ suggestion.confidence }}% 置信度
              </el-tag>
            </div>
            <div class="suggestion-description">
              {{ suggestion.description }}
            </div>
            <div class="suggestion-actions">
              <el-button 
                type="primary" 
                size="small" 
                @click="applySuggestion(suggestion)"
              >
                应用建议
              </el-button>
              <el-button 
                type="info" 
                size="small" 
                @click="dismissSuggestion(suggestion)"
              >
                忽略
              </el-button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="quick-actions">
        <el-button 
          type="success" 
          :icon="MagicStick" 
          @click="triggerSmartMatch"
          size="large"
          class="smart-match-btn"
        >
          开始智能匹配
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { MagicStick, Close, Lightning } from '@element-plus/icons-vue'

interface Props {
  transactionsCount: number
  ordersCount: number
  matchSuggestions: any[]
}

const props = defineProps<Props>()
const emit = defineEmits(['apply-suggestion', 'close', 'smart-match'])

const getConfidenceType = (confidence: number) => {
  if (confidence >= 80) return 'success'
  if (confidence >= 60) return 'warning'
  return 'info'
}

const applySuggestion = (suggestion: any) => {
  emit('apply-suggestion', suggestion)
}

const dismissSuggestion = (suggestion: any) => {
  // 忽略建议逻辑
}

const triggerSmartMatch = () => {
  // 触发智能匹配逻辑
  emit('smart-match')
}
</script>

<style scoped lang="scss">
.smart-match-assistant {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 320px;
  max-height: calc(100vh - 40px);
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  
  .assistant-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #eee;
    
    h3 {
      margin: 0;
      font-size: 16px;
      color: #303133;
      display: flex;
      align-items: center;
      gap: 8px;
      
      .header-icon {
        color: #409eff;
      }
    }
  }
  
  .assistant-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    
    .stats-overview {
      display: flex;
      gap: 16px;
      margin-bottom: 20px;
      
      .stat-item {
        flex: 1;
        text-align: center;
        padding: 12px;
        background: #f5f7fa;
        border-radius: 6px;
        
        .stat-value {
          font-size: 24px;
          font-weight: 600;
          color: #409eff;
          margin-bottom: 4px;
        }
        
        .stat-label {
          font-size: 12px;
          color: #606266;
        }
      }
    }
    
    .suggestions-section {
      margin-bottom: 20px;
      
      h4 {
        margin: 0 0 12px 0;
        font-size: 14px;
        color: #303133;
      }
      
      .suggestions-list {
        .suggestion-card {
          padding: 12px;
          margin-bottom: 12px;
          border: 1px solid #ebeef5;
          border-radius: 6px;
          background: #fafafa;
          
          .suggestion-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            
            .suggestion-icon {
              color: #409eff;
            }
            
            .suggestion-title {
              font-size: 14px;
              font-weight: 500;
              color: #303133;
              flex: 1;
            }
          }
          
          .suggestion-description {
            font-size: 12px;
            color: #606266;
            margin-bottom: 12px;
            line-height: 1.4;
          }
          
          .suggestion-actions {
            display: flex;
            gap: 8px;
          }
        }
      }
    }
    
    .quick-actions {
      .smart-match-btn {
        width: 100%;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .smart-match-assistant {
    position: fixed;
    top: 10px;
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100vh - 20px);
  }
}
</style>